<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板🔥</title>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,600);

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      font-family: "Roboto", sans-serif;
      height: 100%;
      margin-bottom: 50px;
      background: cadetblue;
    }

    .container {
      width: 85%;
      background: #fff;
      margin: 50px auto;
      border-radius: 5px;
      padding: 15px;
    }

    #close {
      background: #28256b;
      width: 100%;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #close:hover {
      background: #1d1a4d;
    }

    .title {
      font-size: 27px;
      text-indent: 10px;
    }

    .comment-form {
      display: flex;
      flex-direction: column;
    }

    .comment-form input,
    .comment-form textarea {
      border-radius: 5px;
      background: #efefef;
      border: none;
      outline: none;
      padding: 10px;
      margin-bottom: 20px;
    }

    .comment-form :disabled {
      background: rgba(0, 0, 0, 0.351);
      cursor: not-allowed;
    }


    #submit {
      background: #298d9f;
      width: 67px;
      color: #fff;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 5px;
      border: none;
      transition: all 0.2s;
    }

    #submit:hover {
      background: #1e6875;
    }

    #comment-list li {
      padding: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    #comment-list li .top {
      display: flex;
      justify-content: space-between;
    }

    #comment-list li .top :first-child {
      font-weight: 600;
    }

    #comment-list li .top :last-child {
      font-size: 12px;
    }

    .content-box {
      display: flex;
      align-items: center;
    }

    .content {
      flex-grow: 1;
      margin: 10px 0;
      background: #eee;
      padding: 2rem 1rem;

    }

    .btn-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 20px;

    }

    .btn-box img {
      width: 30px;
    }

    .content-box button {
      min-width: 80px;
      background: rgb(234, 102, 102);
      color: #fff;
      border: none;
      padding: 0.5rem;
      border-radius: 7px;
      margin-top: 10px;
    }

    .content-box button:hover {
      background: rgb(176, 80, 80);

    }
    
  </style>
</head>

<body>
  <div id="app" class="container">
    <button id="close" @click="isClosed = !isClosed">{{ isClosed ? '开启留言' :'关闭留言'}}</button>
    <!-- 表单区域 -->
    <div>
      <h2 class="title">留言板</h2>
      <div class="comment-form">
        <input v-model="name" :disabled="isClosed" id="name" type="text" placeholder="请输入您的姓名...">
        <textarea :disabled="isClosed" @keyup.enter="addComment" v-model="comment" id="comment" name=""
          placeholder="请输入您的留言..." cols="30" rows="3"></textarea>
        <button :disabled="isClosed" @click="addComment" id="submit">留言</button>
      </div>
    </div>

    <!-- 列表区域 -->
    <div>
      <h2 class="title">留言列表</h2>
      <ul id="comment-list">
        <li v-for="(item, index) in list" :key="index">
          <div class="top"><span>{{item.name}}</span><span>{{item.date}}</span></div>
          <div class="content-box">
            <div class="content">{{item.content}}</div>
            <div class="btn-box" >
              <div @click="item.isHappy =!item.isHappy" >
              <img  v-show = "!item.isHappy" src="./zan.png" alt="">
              <img  v-show = "item.isHappy" src="./zan1.png" alt="">
             
              </div>
              <button @click="deleteHandler(index)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 引入vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
       
        list: [
          {
            name: 'lisi',
            date: '2023/2/3',
            content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
            isHappy :false
          },
          {
            name: 'wangwu',
            date: '2023/1/3',
            content: 'ur adipisicing elit. Odio sed eos esse quod. Quod animi id adipisci. Pariatur natus laborum quasi veniam? Maiores eos assumenda doloremque consectetur ducimus maxime excepturi?Lorem ipsum dolor sit amet consectetur adipisicing elit',
            isHappy :false
          },
        ],
        name: '',
        comment: '',
        isClosed: false
      },
      methods: {
        addComment() {
          this.list.unshift({
            name: this.name,
            date: new Date().toLocaleDateString(),
            content: this.comment,
            isHappy :false,
          })
          this.name = ''
          this.comment = ''
        },
        deleteHandler(i) {
          this.list.splice(i, 1)
        }
      }
    })
  </script>
</body>

</html>